import React,{useEffect,useState} from 'react';
import {Timeline, Tag, Card, Skeleton} from "antd";
import dayjs from 'dayjs'
const {Meta} = Card;
export const TimeLineComp = function ({data,active}) {
    console.log(data,'timeLineComponent')

    const [skeletonActive,setSkeletonActive] = useState(true);
    const [committerList, setCommitterList] = useState([])
    useEffect(()=>{
        if(data){
            let result = data.map((item)=>{
                return <TimeLineChildren item={item}/>
            }).map((item)=>{
                return {
                    children:item
                }
            })
            console.log(result)
            setCommitterList(result)
        }
    },[data]);
    useEffect(()=>{
        setSkeletonActive(active);
    },[active])
    return (
        <>
            { !skeletonActive  ?
                <Timeline items={committerList}/> :
                <Skeleton active={skeletonActive}/>
            }

        </>
    )

};

const TimeLineChildren = ({item}) => {

    const getTitle  = (date)=>{
        if(date){
           const d =  new Date(date);
           return dayjs(d).format('YYYY-MM-DD HH:mm:ss');
        }
    }

    return (
        <>
            <Card title={getTitle(item.date)} style={{width:'fit-content'}}>
                <Meta description={item.message}/>
            </Card>

        </>
    )
}